<template>
	<div id="note-item">
		<img :src="item.imgSrc" class="user-img">
		<div class="text" v-if="show">
			<div class="table-cell left-cell">
				<p>{{ item.name }}</p>
				<p>{{ item.tel }}</p>
			</div>
			<div class="table-cell hide">
				<img class="icon" src="../../static/img/set.png" @click="toEdit">
				<img class="icon" src="../../static/img/trash.png" @click="toRemove">
			</div>
		</div>
		<div class="text" v-else>
			<div class="table-cell left-cell">
				<input type="text" name="name" v-model="name">
				<input type="text" name="tel" v-model="tel">
			</div>
			<div class="table-cell">
				<img class="icon" src="../../static/img/check.png" @click="toSave">
				<img class="icon" src="../../static/img/cancel.png" @click="toCancel">
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name:"noteItem",
	props:['item'],
	data:function() {
		return {
			show:true,
			name:this.item.name,
			tel:this.item.tel,
			oldName: this.item.name,
            oldTel: this.item.tel
		}
	},
	methods:{
		toEdit:function() {
			this.show = false;
		},
		toRemove:function() {
			this.$emit('toRemove',this.item.id);
		},
		toSave:function() {
			this.show = true;
			this.$emit('toChange',{
				id:this.item.id,
				name:this.name,
				tel:this.tel
			})
		},
		toCancel:function() {
			this.show = true;
			this.name=this.item.name;
			this.tel=this.item.tel;
		}
	}
}
</script>

<style>
#note-item {height: 100%;}
#note-item .user-img {width: 45px;float:left;margin: 10px;}
#note-item .text {display: table; height: 100%;}
#note-item .text img {width: 20px;margin: 2px;}
#note-item .table-cell {display: table-cell;vertical-align: middle;}
#note-item .left-cell,.left-cell input {width: 100px;padding-right: 5px;margin: 2px 0;}
#note-item .hide {display: none;}
#note-item:hover .hide {display: table-cell;}
</style>